<template>
  <div class="flex flex-col pt-[20px]">
    <div class="mb-[24px]">
      <n-tabs type="line" animated @update:value="onTabChange">
        <n-tab :name="0" :tab="$t('button.墨西哥收货地址')"> </n-tab>
        <n-tab :name="1" :tab="$t('button.中国收货地址')"> </n-tab>
      </n-tabs>
    </div>
    <div class="pb-[24px]">
      <n-button type="primary" size="large" @click="onClickAdd">
        {{ $t("button.添加送货地址") }}
      </n-button>
      <addAddressDialog
        ref="addAddressDialogRef"
        @reload="getAddressHandler"
        :type="type"
      ></addAddressDialog>
    </div>
    <div class="grid grid-cols-2 gap-4 wrapper">
      <div v-for="item in list.filter((x) => x.type == type)" :key="item.id">
        <div class="is-default" v-if="item.status === 0">
          {{ $t("common.默认") }}
        </div>
        <div class="flex font-[400]">
          <div class="flex items-center flex-1 gap-2">
            <n-icon>
              <UserFilled></UserFilled>
            </n-icon>
            {{ item.fullName }}
          </div>
          <div class="mr-[40px]">{{ item.phone }}</div>
        </div>
        <div class="flex flex-1 gap-2">
          <div class="pt-[2px]">
            <n-icon>
              <LocationFilled></LocationFilled>
            </n-icon>
          </div>
          <div class="">
            <div>{{ item.address }},{{ item.areaText }}</div>
            <div>{{ item.cityText }},{{ item.provinceText }},{{ item.postCode }}</div>
          </div>
        </div>

        <div class="flex gap-3 h-[34px] mt-[8px] items-center">
          <!-- <span class="text-[#0256FF] cursor-pointer">
            Establecer como predeterminado
          </span> -->
          <n-button
            v-if="item.status !== 0"
            secondary
            round
            type="info"
            class=""
            @click="onClickSetDefault(item)"
          >
            {{ $t("button.设为默认") }}
          </n-button>
          <n-icon class="text-[#0256FF] cursor-pointer">
            <Edit @click="onClickEdit(item)"></Edit>
          </n-icon>
          <div class="flex-1"></div>
          <n-popconfirm
            @positive-click="onClickDeleteAddress(item)"
            :positive-text="$t('button.确定')"
            :negative-text="$t('button.取消')"
          >
            <template #trigger>
              <n-icon class="cursor-pointer">
                <TrashCan></TrashCan>
              </n-icon>
            </template>
            {{ $t("confirm.删除地址") }}
          </n-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getUserAddresses, deleteAddress, setDefault } from "@/api/address";
import { TrashCan, Edit, UserFilled, LocationFilled } from "@vicons/carbon";
const addAddressDialogRef = ref();
const list = ref([]);
const type = ref(0);
const getAddressHandler = async () => {
  const { data } = await getUserAddresses();
  list.value = data.data;
};
getAddressHandler();

const onClickAdd = () => {
  addAddressDialogRef.value.open();
};

const onClickDeleteAddress = async (item) => {
  await deleteAddress(item.id);
  await getAddressHandler();
};

const onClickSetDefault = async (item) => {
  await setDefault(item.id);
  await getAddressHandler();
};

const onClickEdit = async (item) => {
  addAddressDialogRef.value.open(item);
};

const onTabChange = (tab) => {
  type.value = tab;
};
</script>

<style lang="scss" scoped>
.wrapper {
  > div {
    border: 1px solid #aaaaaa;
    color: #303030;
    padding: 16px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    font-weight: 300;
    font-size: 16px;
    &:hover {
      border: 1px solid var(--main-color);
      background: #fffbf6;
    }
    &::before {
      background: repeating-linear-gradient(
        -45deg,
        #ff976a 0,
        #ff976a 20%,
        transparent 0,
        transparent 25%,
        #1989fa 0,
        #1989fa 45%,
        transparent 0,
        transparent 50%
      );
      content: "";
      background-size: 80px;
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    > .is-default {
      position: absolute;
      right: -54px;
      top: 14px;
      font-size: 12px;
      background-color: var(--main-color);
      color: white;
      padding: 4px 0px;
      width: 160px;
      text-align: center;
      transform: rotate(45deg);
    }
  }
}
</style>
